<template>
    <div id="bar_line_chart"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: 'barLineChart',
    data() {
        return {
            chart: null,
            timeData: []
        }
    },
    mounted() {
        this.getTimeData();
        this.initChart();
        window.addEventListener('resize', () => {
            this.chart.resize();
        });
    },
    beforeDestroy() {
        if (this.chart) {
            this.chart.dispose();
        }
    },
    methods: {
        initChart() {
            this.chart = echarts.init(document.getElementById('bar_line_chart'));
            if (!this.chart) return;
            this.updateChart();
        },
        updateChart() {
            // mock数据
            const dataArr = {
                orderList: [1000, 1300, 1200, 800, 600, 700],
                priceList: [700, 800, 900, 500, 300, 400],
            };
            const option = {
                // title: {
                //     text: "订单趋势",
                //     textStyle: { color: "#08A7F8" },
                //     left: 'center',
                //     top: 10,
                // },
                legend: {
                    data: ["订单", "金额"],
                    textStyle: { color: "#fff" },
                    right: 20,
                    top: 10,
                },
                tooltip: {
                    trigger: "axis",
                    textStyle: { fontSize: 14 },
                    formatter: (params) => {
                        let rander = params
                            .map((item) =>
                                item.seriesType !== "pictorialBar" ? `<div>${item.seriesName}:  ${item.value} </div>` : ""
                            )
                            .join("");
                        return `<div>${params[0].axisValue}</div>${rander}`;
                    },
                },
                xAxis: {
                    axisTick: { show: true },
                    axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
                    axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
                    data: this.timeData,
                },
                yAxis: [
                    {
                        axisTick: { show: false },
                        splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
                        axisLabel: { textStyle: { fontSize: 14, color: "#fff" } },
                    },
                    {
                        show: true,
                        max: 100,
                        splitLine: { show: false },
                        axisLine: { show: false },
                        axisTick: { show: false },
                        axisLabel: {
                            textStyle: { fontSize: 16, color: "#fff" },
                            formatter: (params) => {
                                return `${params} % `;
                            },
                        },
                    },
                ],
                series: [
                    {
                        z: 1,
                        name: "订单",
                        type: "pictorialBar",
                        symbolPosition: "end",
                        data: dataArr.orderList,
                        symbol: "diamond",
                        symbolOffset: ["-25%", "-50%"],
                        symbolSize: [29, 19],
                        itemStyle: {
                            borderColor: "#2fffa4",
                            color: "#2fffa4",
                        },
                    },
                    {
                        z: 1,
                        type: "bar",
                        name: "订单",
                        barWidth: 30,
                        barGap: "-50%",
                        data: dataArr.orderList,
                        itemStyle: {
                            color: {
                                type: "linear",
                                x: 0,
                                x2: 1,
                                y: 0,
                                y2: 0,
                                colorStops: [
                                    { offset: 0, color: "rgba(29, 245, 160, .7)" },
                                    { offset: 0.5, color: "rgba(29, 245, 160, .7)" },
                                    { offset: 0.5, color: "rgba(29, 245, 160, .3)" },
                                    { offset: 1, color: "rgba(29, 245, 160, .3)" },
                                ],
                            },
                        },
                    },
                    {
                        z: 2,
                        name: "金额",
                        type: "pictorialBar",
                        symbolPosition: "end",
                        data: dataArr.priceList,
                        symbol: "diamond",
                        symbolOffset: ["25%", "-50%"],
                        symbolSize: [29, 19],
                        itemStyle: {
                            borderColor: "#32ffee",
                            color: "#32ffee",
                        },
                    },
                    {
                        z: 2,
                        type: "bar",
                        name: "金额",
                        barWidth: 30,
                        data: dataArr.priceList,
                        itemStyle: {
                            color: {
                                type: "linear",
                                x: 0,
                                x2: 1,
                                y: 0,
                                y2: 0,
                                colorStops: [
                                    { offset: 0, color: "rgba(50, 255, 238, .7)" },
                                    { offset: 0.5, color: "rgba(50, 255, 238, .7)" },
                                    { offset: 0.5, color: "rgba(50, 255, 238, .3)" },
                                    { offset: 1, color: "rgba(50, 255, 238, .3)" },
                                ],
                            },
                        },
                    },
                ],
                grid: { top: "18%", left: "10%", right: "6%", bottom: "10%" },
            };
            this.chart.setOption(option);

        },
        getTimeData() {
            const time = [];
            const date = new Date();
            const month = date.getMonth() + 1;
            const year = date.getFullYear();
            for (let i = 0; i < 6; i++) {
                time.unshift(`${year}-${month - i < 10 ? `0${month - i}` : month - i}`);
            }
            this.timeData = time;
        }
    }
}
</script>

<style scoped>
#bar_line_chart {
    width: 100%;
    height: 100%;
}
</style>
